<template>
    <el-container>
        <el-aside>
            <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                default-active="/dashbord/adminsterUser" text-color="#fff" :unique-opened="true"
                :collapse=!flag :router=true>
                <div class="title" :style="flag ? 'height:50px' : 'height:100px'">动力云客系统</div>
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon>
                            <OfficeBuilding />
                        </el-icon>
                        <span>市场活动</span>
                    </template>
                    <el-menu-item index="/dashbord/Activity">
                        <el-icon>
                            <Guide />
                        </el-icon>
                        市场活动
                    </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="2">
                    <template #title>
                        <el-icon>
                            <SetUp />
                        </el-icon>
                        <span>线索管理</span>
                    </template>
                    <el-menu-item index="/dashbord/Clue">
                        <el-icon>
                            <Document />
                        </el-icon>
                        线索管理
                    </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="3">
                    <template #title>
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>客户管理</span>
                    </template>
                    <el-menu-item index="3-1">
                        <el-icon>
                            <ChatSquare />
                        </el-icon>
                        item one
                    </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="4">
                    <template #title>
                        <el-icon>
                            <Goods />
                        </el-icon>
                        <span>交易管理</span>
                    </template>
                    <el-menu-item index="4-1">
                        <el-icon>
                            <Coin />
                        </el-icon>
                        item one
                    </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="5">
                    <template #title>
                        <el-icon>
                            <Box />
                        </el-icon>
                        <span>产品管理</span>
                    </template>
                    <el-menu-item index="5-1">
                        <el-icon>
                            <Magnet />
                        </el-icon>
                        item one
                    </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="6">
                    <template #title>
                        <el-icon>
                            <Files />
                        </el-icon>
                        <span>字典管理</span>
                    </template>
                    <el-menu-item index="6-1">
                        <el-icon>
                            <Reading />
                        </el-icon>
                        item one
                    </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="7">
                    <template #title>
                        <el-icon>
                            <Filter />
                        </el-icon>
                        <span>用户管理</span>
                    </template>
                    <el-menu-item index="/dashbord/adminsterUser">
                        <el-icon>
                            <Connection />
                        </el-icon>
                        用户管理
                    </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="8">
                    <template #title>
                        <el-icon>
                            <Monitor />
                        </el-icon>
                        <span>系统管理</span>
                    </template>
                    <el-menu-item index="8-1">
                        <el-icon>
                            <FolderChecked />
                        </el-icon>
                        item one
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header>
                    <el-icon @click="showOrNoshow()" v-show="flag">
                        <Fold />
                    </el-icon>
                    <el-icon @click="showOrNoshow()" v-show="!flag">
                        <Expand />
                    </el-icon>
                <el-dropdown>
                    <span class="el-dropdown-link">
                        {{username}}
                        <el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>我的资料</el-dropdown-item>
                            <el-dropdown-item>修改密码</el-dropdown-item>
                            <el-dropdown-item divided @click="logout()">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>
            <el-main>
                <RouterView v-if="reflash"></RouterView>
            </el-main>
            <el-footer>动力云客系统欢迎你</el-footer>
        </el-container>
    </el-container>
</template>
<script setup>
import { useCounterStore } from '@/stores/counter';
import { doGet } from '@/util/axios';
import { ref,onMounted, provide,nextTick} from 'vue';
import { useRouter} from "vue-router";
provide("reflash",()=>{
    reflash.value=false
    nextTick(() => {  
    console.log('DOM 已更新');
    reflash.value=true
  });  
})
let reflash=ref(true)
const store = useCounterStore()
let userouter=useRouter()
let flag=ref(true);
let username=ref("");
function showOrNoshow(){
    flag.value=!flag.value
}
function logout(){
    doGet("/logout").then(res=>{
        window.localStorage.removeItem("token")
        window.sessionStorage.removeItem("token")
        userouter.replace("/")
        store.changestatusForFalse()
    })
}
onMounted(()=>{
    doGet("/UserInfo").then(res=>{
        window.sessionStorage.setItem("userInfo",res.data.data)
        username.value=res.data.data.loginAct
    })
})
</script>
<style scoped>
.el-menu{
    border: 0;
}
.el-aside{
    background-color: black;
    width: auto;
}
.el-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 35px;
    background-color: lightskyblue;
}
.el-footer{
    height: 35px;
    background-color: lightskyblue;
    text-align: center;
    line-height: 35px;
    color: white;
}
.el-container{
    height: 100vh;
}
.title{
    color: white;
    font-size: 16px;
    height: 50px;
    text-align: center;
    line-height: 50px;
   
}
</style>